<template>
    <div class="root">
        <a-select v-model="provinceName" style="width: 200px; margin-right:30px;" placeholder="please select your zone">
            <a-select-option value="广东省">
                广东省
            </a-select-option>
            <a-select-option value="山东省">
                山东省
            </a-select-option>
            <a-select-option value="新疆维吾尔自治区">
                新疆维吾尔自治区
            </a-select-option>
            <a-select-option value="宁夏回族自治区">
                宁夏回族自治区
            </a-select-option>
            <a-select-option value="四川省">
                四川省
            </a-select-option>
            <a-select-option value="陕西省">
                陕西省
            </a-select-option>
            <a-select-option value="湖南省">
                湖南省
            </a-select-option>
            <a-select-option value="甘肃省">
                甘肃省
            </a-select-option>
            <a-select-option value="海南省">
                海南省
            </a-select-option>
            <a-select-option value="青海省">
                青海省
            </a-select-option>
            <a-select-option value="北京市">
                北京市
            </a-select-option>
            <a-select-option value="河南省">
                河南省
            </a-select-option>
            <a-select-option value="山西省">
                山西省
            </a-select-option>
            <a-select-option value="云南省">
                云南省
            </a-select-option>
            <a-select-option value="内蒙古自治区">
                内蒙古自治区
            </a-select-option>
            <a-select-option value="黑龙江省">
                黑龙江省
            </a-select-option>
            <a-select-option value="河北省">
                河北省
            </a-select-option>
            <a-select-option value="福建省">
                福建省
            </a-select-option>
            <a-select-option value="浙江省">
                浙江省
            </a-select-option>
            <a-select-option value="江苏省">
                江苏省
            </a-select-option>
            <a-select-option value="辽宁省">
                辽宁省
            </a-select-option>
            <a-select-option value="贵州省">
                贵州省
            </a-select-option>
            <a-select-option value="上海市">
                上海市
            </a-select-option>
            <a-select-option value="湖北省">
                湖北省
            </a-select-option>
            <a-select-option value="吉林省">
                吉林省
            </a-select-option>
            <a-select-option value="广西壮族自治区">
                广西壮族自治区
            </a-select-option>
            <a-select-option value="安徽省">
                安徽省
            </a-select-option>
            <a-select-option value="西藏自治区">
                西藏自治区
            </a-select-option>
            <a-select-option value="江西省">
                江西省
            </a-select-option>
        </a-select>
        <a-date-picker style="margin-right:30px;" @change="setStartDate" />
        <a-date-picker style="margin-right:30px;" @change="setEndDate" />
        <a-button type="primary" @click="submit">
            查询
        </a-button>
        <div class="row1">
            <div class="chart1" ref="chart1"></div>
            <div class="chart2" ref="chart2"></div>
        </div>
        <div class="row2">
            <div class="chart3" ref="chart3"></div>
            <div class="chart4" ref="chart4"></div>
        </div>

    </div>
</template>

<script>
import { getProvinceData } from '@/api/chart/province'
//import * as echarts from "echarts";
import echarts from 'echarts';
export default {
    data() {
        return {
            provinceName: '',
            startDate: '',
            endDate: '',
            cured: [],
            dead: [],
            mid: [],
            high: [],
            current: [],
            confirm: [],
            date: [],
        }
    },
    methods: {
        setStartDate(date, dateString) {
            this.startDate = dateString;
        },
        setEndDate(date, dateString) {
            this.endDate = dateString;
        },
        showCuredDeadChart() {
            let myEchart1 = echarts.init(this.$refs.chart1);
            let option = {
                title: {
                    text: '治愈死亡变化图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['治愈', '死亡']
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {},
                        dataView: { show: true, readOnly: false },
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.date
                },
                yAxis: {
                    type: 'value'
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100,
                    }
                ],
                series: [
                    {
                        name: '治愈',
                        type: 'line',
                        stack: '1',
                        data: this.cured
                    },
                    {
                        name: '死亡',
                        type: 'line',
                        stack: '2',
                        data: this.dead
                    }
                ]
            };
            myEchart1.setOption(option);
        },
        showCurrentChart() {
            let myEchart2 = echarts.init(this.$refs.chart2);
            let option = {
                title: {
                    text: '当日现存病患变化图'
                },
                color: '#2f4554',
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Current']
                },
                xAxis: {
                    type: 'category',
                    data: this.date
                },
                yAxis: {
                    type: 'value'
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {},
                        dataView: { show: true, readOnly: false },
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100,
                    }
                ],
                series: [
                    {
                        data: this.current,
                        type: 'bar'
                    }
                ]
            };
            myEchart2.setOption(option);
        },
        showConfimedChart() {
            let myEchart3 = echarts.init(this.$refs.chart3);
            let option = {
                title: {
                    text: '累计确诊变化图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {},
                        dataView: { show: true, readOnly: false },
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.date
                },
                yAxis: {
                    type: 'value'
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100,
                    }
                ],
                series: [
                    {
                        name: 'Confirmed',
                        type: 'line',
                        stack: '1',
                        data: this.confirm
                    }
                ]
            };
            myEchart3.setOption(option);
        },
        showMidHighChart() {
            let myEchart4 = echarts.init(this.$refs.chart4);
            let option = {
                title: {
                    text: '中高风险区变化图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['高风险', '中风险']
                },
                xAxis: {
                    type: 'category',
                    data: this.date
                },
                yAxis: {
                    type: 'value'
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {},
                        dataView: { show: true, readOnly: false },
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100,
                    }
                ],
                series: [
                    {
                        name: '高风险',
                        color: '#4B0082',
                        data: this.high,
                        type: 'bar',
                    },
                    {
                        name: '中风险',
                        color: '#228B22',
                        data: this.mid,
                        type: 'bar',
                    },
                ]
            };
            myEchart4.setOption(option);
        },
        submit() {
            getProvinceData(this.provinceName, this.startDate, this.endDate).then(res => {
                console.log(res);
                for (let i = 0; i < res.date.length; i++) {
                    console.log(res.date[i].substr(0, 10));
                    res.date[i] = res.date[i].substr(0, 10);
                }
                this.date = res.date;
                this.cured = res.cured;
                this.dead = res.dead;
                this.mid = res.mid;
                this.high = res.high;
                this.current = res.current;
                this.confirm = res.confirm;
                this.showCuredDeadChart();
                this.showCurrentChart();
                this.showConfimedChart();
                this.showMidHighChart();
            })
        },

    }

}
</script>

<style lang="less" scoped>
.row1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 400px;
}

.row1 .chart1 {
    width: 50%;
    flex: 1;
}

.row1 .chart2 {
    width: 50%;
    flex: 1;
}

.row2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 400px;
}

.row2 .chart3 {
    width: 50%;
    flex: 1;
}

.row2 .chart4 {
    width: 50%;
    flex: 1;
}
</style>